<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>截取视频第一帧作为封面</title>
</head>
<body>
	<video id="video" controls="controls" src="./1.mp4" width="360" height="640">
		<img id="load" src="./loading.gif" style="display:none;" /><!-- 利用父相子绝 -->
	</video>
	<input id="button" type="submit" value="截取吧" />
	<script>
		(function(){
			let button=document.querySelector('#button');
			let video=document.querySelector('#video');
			let mxcimg=document.querySelector('#load');
			let captureImage=function(){
				let canvas=document.createElement('canvas');
				canvas.width=360;
				canvas.height=640;
				let ctx=canvas.getContext('2d');
				ctx.drawImage(video,0,0,360,640);
				//此时我们已经有图片了(表现为canvas标签)，但是我们需要插入到img标签中！
				let img=document.createElement('img');
				// canvas.toDataURL(type, encoderOptions); -> 图片格式，图片质量
				img.src=canvas.toDataURL('image/png');
				document.body.appendChild(img);
				mxcimg.style.display="none";
                console.log(33)
			};
			button.addEventListener('click',function(){
				mxcimg.style.display="block";
				
				video.addEventListener('loadeddata',captureImage);
			});
		})();
        
	</script>
</body>
</html>
